<style>
.weui-btn_plain-default {
  margin-top: 15px;
}
.weui-mask {
  z-index: 2 !important;
}
.weui-dialog {
  z-index: 3 !important;
}
</style>
<template>
  <div>

    <x-header style="background-color:#10aeff;">用户管理</x-header>
    <!-- <load-more tip="暂未实现" :show-loading="false" background-color="#fbf9fe"></load-more> -->
    <search v-model="serachKey" position="absolute" auto-scroll-to-top top="46px" @on-submit="onSearch" ref="search"></search>
    <!-- 操作按钮组 -->
    <divider>操作</divider>
    <div style="margin: 0 15px;">
      <x-button mini plain @click.native="addshow=true">新增</x-button>
      <x-button v-if="checked" mini type="primary" @click.native="updatefun">修改</x-button>
      <x-button v-if="checked" mini type="warn" @click.native="delfun">删除</x-button>
    </div>
    <!-- /操作按钮组 -->

    <checklist ref="demoObject" title="用户信息" :max="1" :options="keydata" v-model="checkedValue" @on-change="checkeds"></checklist>

    <!-- 新增用户窗体 -->
    <div v-transfer-dom>
      <confirm v-model="addshow" title="新增用户" @on-confirm="onConfirmAdd" @on-cancel="onCancel">
        <group>
          <x-input align="left" title="姓名" v-model="obj.user_name"></x-input>
          <x-input align="left" title="工号" v-model="obj.user_code"></x-input>
          <x-input align="left" title="密码" v-model="obj.user_pass"></x-input>
          <x-input align="left" title="手机" v-model="obj.user_phone"></x-input>
          <x-input align="left" title="电话" v-model="obj.user_office_phone"></x-input>
          <selector align="left" title="性别" :options="['男', '女']" v-model="obj.user_sex"></selector>
          <popup-picker title="部门" :data="departmentlist" v-model="departmentvalue" value-text-align="left"></popup-picker>

        </group>
      </confirm>
    </div>
    <!-- /修改用户窗体 -->

    <div v-transfer-dom>
      <confirm v-model="updateshow" title="修改用户" @on-confirm="onConfirmUpdate" @on-cancel="onCancel">
        <group>
          <x-input align="left" disabled title="姓名" v-model="obj.user_name"></x-input>
          <x-input align="left" disabled title="工号" v-model="obj.user_code"></x-input>
          <x-input align="left" title="密码" v-model="obj.user_pass"></x-input>
          <x-input align="left" title="手机" v-model="obj.user_phone"></x-input>
          <x-input align="left" title="电话" v-model="obj.user_office_phone"></x-input>
          <x-input align="left" disabled title="性别" v-model="obj.user_sex"></x-input>
          <popup-picker title="部门" :data="departmentlist" v-model="departmentvalue" value-text-align="left"></popup-picker>

        </group>
      </confirm>
    </div>
    <!-- /修改用户窗体 -->

    <!-- 删除用户窗体 -->

    <div v-transfer-dom>
      <confirm v-model="delshow" title="删除用户" @on-confirm="onConfirmDel">
        <p style="text-align:center;">确认要删除用户: {{ obj.user_code }}{{ obj.user_name }}？</p>
      </confirm>
    </div>
    <!-- /删除用户窗体 -->

    <toast v-model="handleSuccess" :time="1000">操作成功</toast>
  </div>
</template>

<script>
import {
  TransferDom,
  LoadMore,
  XHeader,
  Checklist,
  CellBox,
  XButton,
  Group,
  Alert,
  XInput,
  Confirm,
  Popup,
  Divider,
  Search,
  Selector,
  PopupPicker,
  Toast
} from "vux";
import Icon from "vue-awesome/components/Icon";
import "vue-awesome/icons/folder-open";
import axios from "axios";
export default {
  directives: {
    TransferDom
  },
  components: {
    LoadMore,
    XHeader,
    Checklist,
    CellBox,
    XButton,
    Group,
    Alert,
    XInput,
    Confirm,
    Popup,
    Divider,
    Search,
    Selector,
    PopupPicker,
    Toast
  },
  created() {
    this.getInfo();
  },
  data() {
    return {
      data: [],
      keydata: [],
      checkedValue: [],
      serachKey: "",
      obj: {
        user_pass: "",
        user_name: "",
        user_code: "",
        company: "",
        department: "",
        user_sex: "",
        user_phone: "",
        user_office_phone: ""
      },
      addshow: false,
      checked: false,
      departmentvalue: [],
      departmentlist: [],
      handleSuccess: false,
      updateshow: false,
      delshow: false
    };
  },
  methods: {
    delfun() {
      this.delshow = true;
      let index = this.checkedValue[0] - 1;
      this.obj.id = this.data[index].id;
      this.obj.user_code = this.data[index].user_code;
      this.obj.user_name = this.data[index].user_name;
    },
    onCancel() {
      this.departmentvalue = [];
      for (const item in this.obj) {
        this.obj[item] = null;
      }
    },
    updatefun() {
      this.updateshow = true;
      let index = this.checkedValue[0] - 1;
      this.obj.id = this.data[index].id;
      this.obj.user_pass = this.data[index].user_pass;
      this.obj.user_name = this.data[index].user_name;
      this.obj.user_code = this.data[index].user_code;
      this.obj.department = this.data[index].department;
      this.departmentvalue.push(this.data[index].department);
      this.obj.user_sex = this.data[index].user_sex == 1 ? "男" : "女";
      this.obj.user_phone = this.data[index].user_phone;
      this.obj.user_office_phone = this.data[index].user_office_phone;
    },
    onSearch() {
      this.getInfo();
    },
    checkeds() {
      if (this.checkedValue.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    async getInfo() {
      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `{ userListSearch(key:"${this.serachKey}",company:"${
            this.$store.state.info.user.company
          }"){
                  id,
                  department,
                  user_name,
                  user_code,
                  user_sex,
                  user_pass,
                  user_phone,
                  user_nowdate,
                  user_lastdate,
                  user_office_phone,
                }
                departmentList{ department,company}}`
        });
        this.data = [];
        this.data = info.data.data.userListSearch;
        let temp = [];
        for (const item of info.data.data.departmentList) {
          if (item.company == this.$store.state.info.user.company) {
            temp.push(item.department);
          }
        }
        this.departmentlist.push(temp);
        // 因为组件需要key，而原始数据没有，调用此方法增加
        this.getKeydata();
      } catch (error) {
        console.error(error);
      }
    },
    getKeydata() {
      this.keydata = [];
      for (let index = 0; index < this.data.length; index++) {
        let temp = {
          key: index + 1,
          value: `${this.data[index].department} | ${
            this.data[index].user_name
          }  | ${this.data[index].user_code}`
        };
        this.keydata.push(temp);
      }
    },
    async onConfirmDel() {
      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `mutation{userDel(
                          id:${this.obj.id}
                          )}
                          `
        });
        if (info.data.data.userDel) {
          for (const item in this.obj) {
            this.obj[item] = null;
          }
          this.departmentvalue = [];
          this.handleSuccess = true;
          this.getInfo();
        }
      } catch (error) {
        console.error(error);
      }
    },
    async onConfirmUpdate() {
      this.obj.company = this.$store.state.info.user.company;
      this.obj.department = this.departmentvalue[0];

      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      console.log(this.obj);
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `mutation{userUpdate(
                          user_pass:"${this.obj.user_pass}",
                          user_phone:"${this.obj.user_phone}",
                          user_office_phone:"${this.obj.user_office_phone}",
                          department:"${this.obj.department}",
                          company:"${this.obj.company}",
                          id:${this.obj.id}
                          )}
                          `
        });
        if (info.data.data.userUpdate) {
          for (const item in this.obj) {
            this.obj[item] = null;
          }
          this.departmentvalue = [];
          this.handleSuccess = true;
          this.getInfo();
        }
      } catch (error) {
        console.error(error);
      }
    },
    async onConfirmAdd() {
      this.obj.company = this.$store.state.info.user.company;
      if (this.obj.user_sex == "男") {
        this.obj.user_sex = 1;
      } else {
        this.obj.user_sex = 0;
      }
      this.obj.department = this.departmentvalue[0];

      let instance = axios.create({
        headers: { "content-type": "application/json" }
      });
      try {
        let info = await instance.post(`http://192.168.10.19:4000/graphql`, {
          query: `mutation{userAdd(user_name:"${this.obj.user_name.toUpperCase()}",
                          user_sex:${this.obj.user_sex},
                          user_code:"${this.obj.user_code}",
                          user_pass:"${this.obj.user_pass}",
                          user_phone:"${this.obj.user_phone}",
                          user_office_phone:"${this.obj.user_office_phone}",
                          department:"${this.obj.department}",
                          company:"${this.obj.company}")
                          {id}}`
        });
        if (info.data.data.userAdd) {
          for (const item in this.obj) {
            this.obj[item] = null;
          }
          this.departmentvalue = [];
          this.handleSuccess = true;
          this.getInfo();
        }
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style>
.vux-popup-picker-select {
  padding-left: 10px;
}
</style>




